<template>
    <div class="container">
      <div class="header">
        <mt-header  title="我的购物车"></mt-header>
        <div class="notice">
          <i class="van-icon van-icon-volume-o van-notice-bar__left-icon"></i>
          <span>当前购物车:{{cartNum}}件商品,合计金额:{{cartAllPrice}}</span>
        </div>
      </div>
      <div class="mian">
        <OrderDetailsItem   v-for="(item,index) in cartList" :key="index" :item="item"  />
      </div>
      <div class="footer" v-if="cartList.length > 0">
        <mt-button @click="pay" type="primary">立即支付</mt-button>
        <mt-button @click="clearCartList" type="danger">清空购物车</mt-button>
      </div>
      <p v-if="cartList.length == 0">当前购物车无数据</p>
    </div>
</template>

<script>
import { MessageBox,Toast } from 'mint-ui';
import CartCard from '../CartCard/CartCard.vue'
import OrderDetailsItem from '../OrderDetailsItem/OrderDetailsItem.vue';
export default {
  components: { CartCard, OrderDetailsItem },
  data(){
    return {
      cartList:[
        {
          "商品名称":'缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果',
          "单价":97.5,
          "数量":1
        },
        {
          "商品名称":'缤咕果园 海南红心火龙果6斤装约7个大果 红肉吉祥果新鲜水果',
          "单价":97.5,
          "数量":1
        },
      ],
    }
  },
  computed:{
    cartNum(){
      return this.cartList.length
    },
    cartAllPrice(){
      let countPrice = 0
      this.cartList.forEach(item=>{
        countPrice += item['单价'] * item['数量']
      })
      return  countPrice
    }
  },
  methods:{
    clearCartList(){
      MessageBox.confirm('确定清空购物车?').then(value => {
        this.cartList = []
      });
    },
    pay(){
      Toast('还没做，不要急')
    }
  }

}
</script>

<style scoped>
.container{
  background: #e7e8e861;
  margin-bottom: 6vh;
}
.container >>> .mint-header{
  background: #717171;
  font-size: 20px;
}
.notice{
  text-align: left;
  padding: 5px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fffbe8;
  color: #ed6a0c;
  font-size: 14px;
}


.main{
  padding: 0px 10px;
}

</style>